<!--
 @description 装修实景-图详情
 @fileName detailPic.vue
 @author zengqiongying
 @created 2023/09/11 14:06:36
-->
<template>
  <div>
    <MineHeader arrow show-statusbar title="" bg-color="" />
    <div class="detail-box">
      <div class="reality-detial-swiper">
        <SwipePlay v-model="currentIndex" preview :list="swipeList" :host="ADS_STATIC_PATH" class-name="reality-swiper" />
        <div v-if="curSwipeObj && curSwipeObj.fileUrl" class="btn-download" @click="downLoad(curSwipeObj)">下载图{{ currentIndex + 1 }}</div>
      </div>
      <div class="detail-content">
        <div class="d-title">{{ detail.realityName }}</div>
        <div class="d-time">{{ detail.createTime }}</div>
        <div class="tags">
          <div v-if="detail.styleName" class="tag">{{ detail.styleName }}</div>
          <div v-if="detail.seriesName" class="tag">{{ detail.seriesName }}</div>
          <div v-if="detail.spaceName" class="tag">{{ detail.spaceName }}</div>
          <div v-if="detail.categoryName" class="tag">{{ detail.categoryName }}</div>
          <div v-if="detail.doorColorName" class="tag">{{ detail.doorColorName }}</div>
          <div v-if="detail.cabinetColorName" class="tag">{{ detail.cabinetColorName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MineHeader from '@/components/MineHeader'
import SwipePlay from '@/components/SwipePlay'
import DetailMixin from './DetailMixin'
export default {
  name: 'RealityPicDetail',
  components: { MineHeader, SwipePlay },
  mixins: [DetailMixin],
  data() {
    return {
      currentIndex: 0
    }
  },

  computed: {
    swipeList() {
      const list = this.detail && this.detail.realityImageList || []
      if (list.length > 0) {
        return list.map(e => {
          e.src = e.picUrl
          e.type = 'image'
          return e
        })
      } else {
        if (this.detail.realityPic) {
          return [
            { src: this.detail.realityPic, type: 'image' }
          ]
        }
      }
      return []
    },
    curSwipeObj() {
      if (this.swipeList && this.swipeList.length === 0) return null
      const obj = this.swipeList[this.currentIndex]
      if (obj && obj.src) {
        return {
          fileName: `${this.detail.realityName}-图${this.currentIndex + 1}`,
          fileUrl: obj.src
        }
      }
      return null
    }
  },
  activated() {},

  mounted() {},

  methods: {}
}

</script>
<style lang='less' scoped>
.detail-box{
  // padding-top: 44PX;
}
.btn-download{
  position: absolute;
  left: 10px;
  bottom: 5px;
  z-index: 999;
  padding:5px;
  border-radius: 4px;
  background: #149774;
  color: #FFFFFF;
  line-height: 1;
}
.reality-detial-swiper{
  position: relative;
  /deep/ .reality-swiper{
    height:530px !important;
    .swipe .indicator{
      background: transparent;
    }
    .custom-indicator{
      background: rgba(0,0,0,0.3);
      border-radius: 10px;
      color: #FFFFFF;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      span{
        display: inline-flex;
        padding:  0 8px;
        min-width: 20px;
        height: 20px;
        box-sizing: border-box;
        display: flex;
        justify-content:center;
        align-items: center;
        font-size: 14px;
      }
      span.curent-index{
        // font-weight: bold;
        background: rgba(0,0,0,0.4);
        border-radius: 50%;
        margin-right: 4px;
      }
    }
  }
}
.detail-content{
  margin-top: 10px;
  padding: 16px 14px;
  .d-title{
    font-size: 16px;
    font-weight: 600;
    color: #343640;
    line-height: 22px;
  }
  .d-time{
    margin-top: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #B5B7C4;
    line-height: 18px;
  }
  .tags{
    margin-top: 16px;
    margin-left: -12px;
    display: flex;
    flex-wrap: wrap;
    .tag{
      margin-bottom: 10px;
      margin-left: 12px;
      padding: 0 18px;
      line-height: 26px;
      background:#eaeaea;// #F3F4F5;
      border-radius: 13px;
      white-space: nowrap;
      font-size: 12px;
      font-weight: 500;
      color: #666666;
      letter-spacing: 1px;
      box-sizing: border-box;
    }
  }
}
</style>
